﻿@{
    ViewBag.Title = "Charts";
}
@using OurWedding1

@Html.Partial("ExpensesHeading")
<h2>@Resources.Charts</h2>

<div id="chart_div" style="width: 800px; height: 500px;"><div class="loaderAjax"></div></div>

@section Scripts{


    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            $.post('/Expenses/getPieChartData', {},
            function (data) {
                var tdata = new google.visualization.DataTable();

                tdata.addColumn('string', 'Country');
                tdata.addColumn('number', 'Population');

                for (var i = 0; i < data.length; i++) {
                    tdata.addRow([data[i].Name, data[i].Value]);
                }

                var options = {
                    title: "@Resources.Expenses_Categories"
                };

                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(tdata, options);
            });

        }
    </script>
}

